<template>
  <div>
   <!-- iview -->
   <!-- 表格内固定 antd 的方式 -->
    <div class="table2">
    <a-table :columns="columns" :loading="loading" :pagination="false"  :data-source="tdata" :scroll="{ x: 1500, y: 70 }">
      <template #footer>
        <div class="tableFoot" :style="footObj">我是底部插槽(进行编辑)</div>
      </template>
    </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { TableColumnsType } from 'ant-design-vue';
import { http } from "@/utils/http";
const columns: TableColumnsType = [
  { title: 'id', width: 100, dataIndex: 'id', key: '1', fixed: 'left' },
  { title: 'name', dataIndex: 'name', key: '2', width: 150 },
  { title: 'address', dataIndex: 'address', key: '3', width: 150 },
  { title: 'username', dataIndex: 'username', key: '4', width: 150 },
  { title: 'date', dataIndex: 'date', key: '5', width: 150 },
  // {
  //   title: 'Action',
  //   key: 'operation',
  //   fixed: 'right',
  //   width: 100,
  // },
];

interface DataItem {
  id: string | number;
  key: number;
  name: string;
  age: number;
  address: string;
}

const tdata = ref<DataItem[]>([]);


const queryForm = ref({
  pageNo: 1,
  pageSize:2
})

/* 加载log */
const loading=ref(false)

const contentWidth = ref(0)
const footObj = ref({
  width:'0px'
})


const init = () => {
  /* 数据只有三条，换数据库的数据就没事 */
  if (queryForm.value.pageNo > 2) {
    return
  }
  loading.value=true
  http
    .request("get", "/test/getWangsTable", { params: queryForm.value }).then(res => {
      console.log(res)
      tdata.value = [...tdata.value, ...res.data.data]
      loading.value=false
    })
}
init()


onMounted(() => {
  const target = document.querySelector('.ant-table-body') as HTMLElement
  const targetOne=document.querySelector('.ant-table-body table') as HTMLElement
  const targetFoot=document.querySelector('.ant-table-footer') as HTMLElement
  contentWidth.value = targetOne.clientWidth
  footObj.value.width=contentWidth.value+'px'
  target.addEventListener('scroll', (e: any) => {
    /* 上边滚动条移动到哪个位置下边就到哪里 */
    targetFoot.scrollLeft=target.scrollLeft
    /* 判断到底部加1 */
    if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
      queryForm.value.pageNo += 1
      init()
    }
  })
})


</script>

<style  scoped>
 /* ant 方式更改滚动条 */
 .table2 >>>.ant-table-body::-webkit-scrollbar{
  width: 5px !important;
  height: 5px !important;
}
.table2 >>>.ant-table-body::-webkit-scrollbar-thumb{
  /* border-radius: 100px; */
  background: #ccc;
}


/* 底部滚动条 */
.table2>>>.ant-table-footer{
  width: 100%;
  overflow-x: auto;
}

.table2 >>>.ant-table-footer::-webkit-scrollbar{
  /* scroller-width 不显示滚动条但是能滑动 */
  scrollbar-width: none;
  /* width: 5px !important; */
  /* height: 5px !important; */
}
.table2 >>>.ant-table-footer::-webkit-scrollbar-thumb{
  /* border-radius: 100px; */
  background: #ccc;
}


</style>